<template>
    <div class="com-cnt">
        <ul class="page-part left-spec">
            <li class="left-child" :id="lItem1.id" v-for="(lItem1,lIndex1) in list1" :key="lItem1.id" @click="getListCon(lItem1.id,lIndex1,lItem1.memo)" :class="{selected:lIndex1==clickIndex}">{{lItem1.name}}</li>
            <li class="left-child" v-for="(lItem2,lIndex2) in list2" :key="lItem2.id" @click="getListCons(lItem2.id,lIndex2,lItem2.seoDescription)" :class="{selected:lIndex2+list1.length==clickIndex}">{{lItem2.name}}</li>
        </ul>
        <div class="right-spec">
            <router-link :to="{path:'/search'}" tag="div" class="toSearch">搜索您需要的产品</router-link>
            <ul class="right-con weekul" v-infinite-scroll="loadMore" infinite-scroll-disabled="loading" infinite-scroll-distance="50">
                <div class="recommendPic">
                    <img :src="recommendPic" alt="推荐图">
                </div>
                <li @click="direct(rItem1.id)" v-for="rItem1 in listCon1">
                    <div class="weekListImg">
                        <img :src='rItem1.thumbnail' alt="">
                    </div>
                    <div class="weekListInfo">
                        <div class="weekListTit">{{rItem1.name}}</div>
                        <div class="memberPrice1">会员价</div>
                        <div class="memberPrice2">
                            <div class="memberPriceLeft">￥ {{(rItem1.price)}}</div>
                            <span class="marketPrice">
                                市场价{{(rItem1.marketPrice)}}
                            </span>
                        </div>
                    </div>
                </li>
                <div class="hadbottom">已到底部~</div>
            </ul>
            
        </div>
        
    </div>
</template>

<script>
import http from "@/assets/js/axios"
import { domain,domain2 } from '@/assets/js/config'
//import { fastclick } from "@/assets/js/fastclick.js";
import {Loadmore} from 'mint-ui'
import Qs from 'qs'
import axios from 'axios'
import $ from 'jquery'
export default {
    name: 'njxPage',
    data() {
        return {
            clickIndex: 0,
            list1: [],
            list2: [],
            listCon1: [],
            listCon2: [],
            pgnum: 1,
            pages: 0,
            postData: {},
            commonUrl:'',
            pageNumber: 1, 
            flag: 1, 
            id: 0,
            recommendPic: ''
        }
    },
    created(){
        
    },
    mounted() {
        this.getPages()
        this.getPagesAdd()
    },
    methods: {
        direct: function (val) {
            this.$router.push({ path: "/njxdetails" ,
            query: {
                    id: val,
                }
            });
        },
        // 拿到分类
        getPages: async function () {
            const res = await http.post(domain2+'/shop/api/product/productTagList')
            if (res.status == 200) {
                if (res.data.data) {
                    this.list1 = res.data.data
                    let ishyfl = this.$route.query.ishyfl
                    let hyflIndex
                    this.$nextTick(function () {
                        hyflIndex = $('#9952').index()
                        if(ishyfl == 666){
                            this.getListCon(this.list1[hyflIndex].id,hyflIndex,this.list1[hyflIndex].memo)
                        }else{
                            this.getListCon(this.list1[0].id,0,this.list1[0].memo)
                        }
                    })
                }
            }
        },
        //继续添加分类
        getPagesAdd: function(){
            let that = this
            axios({
                url: domain2 + '/shop/api/product_category/list',
                method: 'post',
                headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
                data: Qs.stringify({'productCategoryId':'10451'})
            }).then(res => { that.getPagesAddsucc(res) }).catch(err => { console.log(err) })
        },
        getPagesAddsucc: function (res) {
            if (res.status == 200) {
                this.list2 = res.data.data
            }
        },
        //获取右边内容1
        getListCon: function(id,lIndex1,recommendPic){
            let that = this
            that.recommendPic = recommendPic
            that.pageNumber = 1
            that.id = id
            that.listCon1 = []
            that.clickIndex = lIndex1
            let postData = {pageNumber: 1,pageSize: 8,productTagId:id}
            that.commonUrl = '/shop/api/product/pageList'
            axios({
                url: domain2 + that.commonUrl,
                method: 'post',
                headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
                data: Qs.stringify(postData)
            }).then(res => { that.getListCon1succ(res) }).catch(err => { console.log(err) })
        },
        getListCon1succ: function (res) {
            if (res.status == 200) {
                this.listCon1 = res.data.data.page.content
            }
        },
        //获取右边内容2
        getListCons: function(id,lIndex2,recommendPic){
            let that = this
            that.recommendPic = recommendPic
            that.pageNumber = 1
            that.id = id
            that.listCon1 = []
            that.clickIndex = lIndex2+that.list1.length
            let postData = {pageNumber: 1,pageSize: 8}
            that.commonUrl = '/shop/api/product/list/'+id
            axios({
                url: domain2 + that.commonUrl,
                method: 'post',
                headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
                data: Qs.stringify(postData)
            }).then(res => { that.getListCon2succ(res) }).catch(err => { console.log(err) })
        },
        getListCon2succ: function (res) {
            if (res.status == 200) {
                this.listCon1 = res.data.data.content
            }
        },
        loadMore() {
            let that = this
            //this.loading = true
            that.pageNumber = that.pageNumber+1
            let postData = {}
            if(that.flag == 1){
                postData = {pageNumber: that.pageNumber,pageSize: 8,productTagId:that.id}
            }else if(that.flag == 2){
                postData = {pageNumber: that.pageNumber,pageSize: 8}
            }
            //setTimeout(() => {
                axios({
                    url: domain2 + that.commonUrl,
                    method: 'post',
                    headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
                    data: Qs.stringify(postData)
                }).then(res => { that.addListConsucc(res) }).catch(err => { console.log(err) })
                //this.loading = false;
            //}, 500)
        },
        addListConsucc: function(res){
            let that = this
            if(that.flag == 1){
                that.listCon1 = that.listCon1.concat(res.data.data.page.content)
            }else if(that.flag == 2){
                that.listCon1 = that.listCon1.concat(res.data.data.content)
            }
        }
    },
}
</script>
<style lang="stylus" scoped>
.com-cnt
    width 100%
    height 100%
    font-size 12px
    .left-spec
        width 90px
        height 100%
        position fixed
        left 0
        top 45px
        background #eeeeee
        display block
        overflow-y scroll
        .selected
            background #fff!important
        .left-child
            background #eeeeee
            height 50px
            line-height 50px
            width 100%
            float left
            margin 0
            border 0
            position relative
            text-align center
        .selected:before 
            content ('')
            position absolute 
            left 0
            top 10px
            width 3px
            height 30px
            background #aad112
    .right-spec
        width 285px
        height 100%
        position fixed
        left 90px
        top 45px
        bottom 0
        .hadbottom
            height 60px
            line-height 60px
            font-size 12px
            color #999999
            text-align center
        .toSearch
            width 260px
            height 27px
            line-height 27px
            text-indent 45px
            margin 6px 10px
            border-radius 13px
            background url(../../assets/imgs/njx/search.png) no-repeat
            background-size 22px 14px
            background-position 17px 7px
            color #999
            border 1px solid #cccccc
        .right-con
            padding 0 12px
            border-top 1px solid #cccccc
            overflow-y scroll
            height auto
            position absolute
            top 40px
            bottom 50px
    .recommendPic 
        width 260px
        height 100px
        img 
            width 100%
            height 100%
.weekul {
    padding: 0 0 10px 10px;
    li {
        height: 80px;
        margin-top: 17px;
        border-radius: 5px;
        box-shadow: 0 0 10px #ccc;
        list-style none
        .weekListImg {
            width: 80px;
            height: 80px;
            float: left;
            img {
                width: 100%;
                height: 100%;
                border-radius: 5px;
            }
        }
        .weekListInfo {
            width: 160px;
            height: 80px;
            padding: 2px 0 0 10px;
            position: relative;
            float: left;
            .weekListTit {
                font-size: 12px;
                white-space: nowrap;
                text-overflow: ellipsis;
                overflow: hidden;
            }
            .memberPrice1 {
                font-size: 12px;
                color: #fff;
                height: 16px;
                width: 60px;
                line-height: 16px;
                background: #C2DF5A;
                position: absolute;
                top: 36px;
                text-align: center;
            }
            .memberPrice2 {
                position: absolute;
                top: 56px;
                .memberPriceLeft {
                    float: left;
                    font-size: 16px;
                    color: #FF0000;
                }
                .marketPrice {
                    float: left;
                    display: block;
                    color: #999999;
                    font-size: 12px;
                    margin-left: 12px;
                    margin-top: 5px;
                    text-decoration: line-through;
                }
            }
        }
    }
}
</style>